<template>
	<view>
		<uni-notice-bar single color="#000" background-color="#D7D7D7" text="漏电检测过程中，设备将断电10秒，请合理安排检测时间" />
		<view class="uni-list-cell uni-list-cell-pd">
			<view class="uni_switch">
				<view class="uni-list-cell-db">自动监测</view>
				<switch color="#13CD66" style="transform:scale(0.7)" :checked="searchOption.value1" />
			</view>
			<view class="uni_switch">
				<view class="uni-list-cell-db">检测周期</view>
				<view class="uni_date" >
					<picker mode="selector" :value="searchOption.value2" :range="[1,2,3,4,5,6,7,8,9,10,11,12]"
						@change="bindMonthChange">
						<view class="uni-input">每月{{searchOption.value2}}号</view>
					</picker>
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
			<view class="uni_switch2">
				<view class="uni-list-cell-db">检测时间</view>
				<view class="uni_date" >
					<picker  mode="time" :value="time" start="00:00" end="23:59"
						@change="bindTimeChange">
						<view class="uni-input">{{time}}</view>
					</picker>
					<uni-icons type="right" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<!-- <view class="uni_switch3">
			<view class="uni-list-cell-db">手动检测</view>
			<switch color="#13CD66" style="transform:scale(0.7)" />
		</view> -->
		<text class="time">上次检测时间：{{detail.lastleakcheckdate}}</text>
	</view>
	<view style="margin-top: 30rpx; text-align: center;">
		<text style="padding: 10rpx 50rpx; border-radius: 10rpx; background-color: #e60012;color: #fff;"
			@click="save">保存</text>
	</view>
	<uni-popup ref="inputDialog" type="dialog">
		<uni-popup-dialog ref="inputClose" mode="input" title="输入内容" value="" placeholder="请输入月份"
			@confirm="dialogInputConfirm"></uni-popup-dialog>
	</uni-popup>
	<uni-popup :is-mask-click="false" ref="popup" background-color="#fff">
		<view style="padding: 20rpx;">
			<view style="text-align: center;margin-bottom: 10rpx;">时分 设置</view>
			<view class="popup-content">
				
				<view>
					<input style="border: 1px solid #000;" type="number" v-model="searchOption.value3"
						placeholder="输入小时" />
				</view>
				<view>
					<input style="border: 1px solid #000;" type="number" v-model="searchOption.value4"
						placeholder="输入分钟" />
				</view>
			</view>
			<view style="text-align: center;margin-bottom: 10rpx;">
				<text style="padding: 10rpx 40rpx; border-radius: 10rpx; background-color: #e60012;color: #fff;"
					@click="popup.close()">确定</text>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		onLoad
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive
	} from "vue"
	import {
		checkLeak,
		updateLeak
	} from "@/api/wuLian.js"
	const calendar = ref()
	const info = reactive({
		lunar: true,
		range: true,
		insert: false,
		selected: [],
		date: new Date()
	})
	const inputDialog = ref()

	function save() {
		searchOption.value1 = searchOption.value1 ? 'true' : 'false'
		updateLeak(searchOption).then(e => {
			uni.showToast({
				title:e.msg,
				icon:"none"
			})
		})
	}

	function showTime() {
		inputDialog.value.open()
	}

	function dialogInputConfirm(item) {
		console.log(item)
		searchOption.value2 = item
	}
	const popup = ref()

	function showAlert() {
		popup.value.open()
	}
	const time =ref("09:00")
	function bindTimeChange(e){
		console.log(e,107)
		time.value = e.detail.value
		const temp = e.detail.value.split(":")
		searchOption.value3 = temp[0]
		searchOption.value4 = temp[1]
	}
	const month = ref("1")
	function bindMonthChange(e){
		console.log(e)
		month.value =e.detail.value
		searchOption.value2 =e.detail.value
	}
	const searchOption = reactive({
		mac: "",
		value1: '',
		value2: '',
		value3: '',
		value4: ''
	})
	const detail = ref({})
	onLoad((option) => {
		searchOption.mac = option.mac
		getList()
	})

	function getList() {
		checkLeak(searchOption.mac).then(e => {
			console.log(e.data, 52)
			detail.value = e.data
			if (e.data.execleakcheck == 'true') {
				detail.value.enableCheck = true
				searchOption.value1 = true
			} else {
				detail.value.enableCheck = false
				searchOption.value1 = false
			}
			let temparr = e.data.leakcheckdate.split(',')
			searchOption.value2 = temparr[0]
			searchOption.value3 = temparr[1]
			searchOption.value4 = temparr[2]
			time.value = `${searchOption.value3}:${searchOption.value4}`
			month.value = searchOption.value2
			
		})
	}
</script>

<style>
	.time {
		font-size: 13px;
		color: #ccc;
		margin: 0 20px;
	}

	.uni_date {
		display: flex;
		align-items: center;
	}

	.uni-noticebar[data-v-c3453ea3] {
		padding: 0;
		margin-top: 10px;
	}

	.uni-list-cell {
		background-color: white;
		margin-top: 30px;
	}

	.uni_switch {

		margin: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		border-bottom: 1px solid #ccc;
	}

	.uni_switch2 {

		margin: 0 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin-bottom: 20px;
	}

	.uni_switch3 {
		background-color: white;

		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px;
		margin-bottom: 20px;
	}

	.popup-content {
		padding: 20rpx;
		border-radius: 10rpx;
		display: flex;
		gap: 10rpx
	}
</style>